<template>
  <div class="paiming">
            <el-table :data="tableData" height="250" style="width: 100%">
              <el-table-column prop="index" label="排名" width="80%" style="text: center">
                <template v-slot="scope" >
                  <span :class="{ top3: scope.row.index <= 2 }" class="notop">{{ scope.row.index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="goodsName" label="商品名" width="90%" />
              <el-table-column prop="sale" label="销量" width="80%" />

            </el-table>
        </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import { getGoodsPx } from '../api/goods';
const props = defineProps({ shopId: String, dateRange: Array });
const tableData = ref([]);

function fetchData(shopId, dateRange) {
  if (!dateRange || dateRange.length !== 2) {
    console.warn('日期范围参数不完整');
    return;
  }
  getGoodsPx({ shopId, dateRange }).then((res) => {
    if (res.data && res.data.code === 200) {
    tableData.value = res.data.data
    for (let i = 0; i < tableData.value.length; i++) {
      tableData.value[i].index = i;
    }
    }
  });
}

watch(
  () => props.dateRange,
  (newVal) => {
    if (newVal && newVal.length === 2) {
      fetchData(props.shopId, newVal);
    }
  },
  { immediate: true }
);

const method=(id, dateRange)=>{
  fetchData(id, dateRange)
}
defineExpose({method})
</script>

<style lang='scss' scoped>

/* 定义一个类用于设置前几名的背景 */
.top3 {
  background-color: #ddd; /* 灰色背景 */
  border-radius: 50%; /* 圆形 */
  padding: 0 6px; /* 内边距 */
  display: inline-block; /* 使 span 能够应用宽度和高度 */
}
.notop{
  display: inline-block;
  padding: 0 6px; /* 内边距 */
}
</style>
